<template>
	<view>
		<view v-if="isRep">
			<my-btn-header :titleHead="titleHead" :btnFont="btnFont" :type="type"
				@maintenanceStatusFun="maintenanceStatusFun()"></my-btn-header>
			<view class="repDevice" @click="skip()">没有报修记录 请点击报修设备</view>
		</view>
		<view v-else>
			<my-btn-header :titleHead="titleHead" :btnFont="btnFont"></my-btn-header>
			<view v-for="(item,index) in repArr" :key="index" @click="checkDetail(item,index)">
				<view class="repDeviceList">
					<view>{{item.repairDate}}</view>
					<view v-if="item.status=='0'" style="color:blue">已报修
						<span v-show="!item.isShow" class="iconfont icon-xiajiantou"></span>
						<span v-show="item.isShow" class="iconfont icon-shangjiantou"></span>
					</view>
					<view v-if="item.status=='1'" style="color:red">处理中
						<span v-show="!item.isShow" class="iconfont icon-xiajiantou"></span>
						<span v-show="item.isShow" class="iconfont icon-shangjiantou"></span>
					</view>
					<view v-if="item.status=='2'">处理完
						<span v-show="!item.isShow" class="iconfont icon-xiajiantou"></span>
						<span v-show="item.isShow" class="iconfont icon-shangjiantou"></span>
					</view>
					<view v-if="item.status=='3'">待确认
						<span v-show="!item.isShow" class="iconfont icon-xiajiantou"></span>
						<span v-show="item.isShow" class="iconfont icon-shangjiantou"></span>
					</view>
				</view>
				<view class="timePos" v-show="item.isShow" style="display: flex;">
					<view style="color:#8F8F94;font-size: 28rpx;">
						<span>
							报修细节情况：
						</span>
						<view>{{item.repairDesc}}</view>
					</view>
					<!-- <view class="" @click="deleteRepairAll(item)"
						style="margin-left: 300rpx; padding: 10rpx 20rpx; background-color: aqua; border-radius: 10rpx; height: 70rpx; line-height: 70rpx;">
						删除
					</view> -->
				</view>
			</view>

		</view>
		<!-- <my-bottom :topName="topName" :bottomArr="roleName=='宿管老师'||roleName=='部门经理'?attBottoms:MagBottoms"></my-bottom>		 -->
	</view>
</template>

<script>
	import topCom from '../component/topCom.vue'
	import bottomCom from '../component/bottom.vue'
	import headTitle from '../component/btnHeadeCom.vue'
	import {
		createApp
	} from 'vue';

	export default {
		name: 'repStatus',
		data() {
			return {
				userInfo: "",
				identity: "", // 身份
				sgUrl: `/pages/maintenance/dormitoryMaintenanceList?buildingNo=畔湖苑&type=报修`, // 班主任头部返回按钮的url
				current: 0,
				roleName: '',
				detailMsg: "",
				classId: '',
				isRep: false,
				isShowList: false,
				topName: '',
				userName: '',
				titleHead: '报修状况',
				btnFont: '报修设备',
				classDeptId: '',
				dormitoryId: '',
				dormitoryNo: '',
				buildingNo: "",
				type: '维修',
				typeName: "报修",
				repArr: [{
					time: '2022-2-10',
					status: '处理中',
					msg: '1、电器损坏',
					isShow: false,
				}, {
					time: '2022-2-11',
					status: '已报修',
					msg: '1、水龙头损坏',
					isShow: false,
				}, {
					time: '2022-2-12',
					status: '处理完',
					msg: '1、电器损坏',
					isShow: false
				}, ],
				MagBottoms: [{
						name: 'home',
						icon: 'iconfont icon-yonghutongji',
						text: "考勤",
						path: '/pages/index/index'
					},
					{
						name: 'atttendance',
						icon: 'iconfont icon-bi',
						text: "统计",
						path: '/pages/index/index'
					},
					{
						name: 'maintenance',
						icon: 'iconfont icon-shezhi',
						text: "设置",
						path: '/pages/index/index'
					},
				],
				Repbottoms: [{
						name: 'home',
						icon: 'iconfont icon-baoxiu',
						text: "报修",
						path: '/pages/maintenance/maintenanceIndex'
					},
					{
						name: 'atttendance',
						icon: 'iconfont icon-bi',
						text: "统计",
						path: '/pages/maintenance/maintenanceIndex'
					},
					{
						name: 'maintenance',
						icon: 'iconfont icon-shezhi',
						text: "设置",
						path: '/pages/maintenance/maintenanceIndex'
					}
				],
				attBottoms: [{
						name: 'main',
						icon: 'iconfont icon-yonghutongji',
						text: "考勤",
						path: '/pages/classManagement/classManagementDormitoryAttendance'
					},
					{
						name: 'clear',
						icon: 'iconfont icon-saoba',
						text: "卫生",
						path: '/pages/classManagement/classManageDormitoryHealth'
					},
					{
						name: 'home',
						icon: 'iconfont icon-baoxiu',
						text: "报修",
						path: '/pages/maintenance/dormitoryMaintenanceList'
					}
				],
			}
		},
		onShow() {
			var that = this
			uni.getStorage({
				key: "userInfo",
				success: (res) => {
					that.roleName = res.data
				}
			})
			uni.getStorage({
				key: "loginName",
				success: (res) => {
					that.userName = res.data
				}
			})
		},
		onLoad(options) {
			this.userInfo = uni.getStorageSync("userRole")
			this.identity = uni.getStorageSync("userRole")
			uni.removeStorage({
				key: "dormitoryId"
			})
			uni.removeStorage({
				key: "classDeptId"
			})
			this.dormitoryId = options.dormitoryId
			if (this.dormitoryId) {
				this.dormitoryNo = options.dormitoryNo
				this.topName = this.dormitoryNo
				this.buildingNo = options.buildingNo
				uni.setStorage({
					key: 'dormitoryId',
					data: this.dormitoryId
				})
				uni.setStorage({
					key: 'dormitoryNo',
					data: this.dormitoryNo
				})
				uni.setStorage({
					key: 'buildingNo',
					data: this.buildingNo
				})
				uni.setStorage({
					key: 'classDeptId',
					data: this.classDeptId
				})

			} else {
				this.topName = options.className
				this.classId = options.classId
				this.classDeptId = options.classDeptId
				// uni.setStorage({
				// 	key:'className',
				// 	data:this.topName
				// })
				uni.setStorageSync("className", this.topName)
				// uni.setStorage({
				// 	key:'classId',
				// 	data:this.classId
				// })
				uni.setStorageSync("classId", this.classId)
				// uni.setStorage({
				// 	key:'classDeptId',
				// 	data:this.classDeptId
				// })
				uni.setStorageSync("classDeptId", this.classDeptId)
			}
			this.sgUrl = '/pages/maintenance/dormitoryMaintenanceList?buildingNo=' + this.buildingNo + '&type=' + this
				.typeName
		},
		components: {
			topCom,
			bottomCom,
			headTitle
		},
		mounted() {
			this.type = "报修"
			if (this.dormitoryId) {
				this.getAppHisRepListByBId()
				this.topName = this.dormitoryNo
				this.buildingNo = this.buildingNo
			} else if (this.classId) {
				this.getAppClassRepairList()
			}
			this.bottomFun()
		},
		methods: {
			deleteRepairAll(item) {
				this.$api.maintenance.deleteRepair(item).then(res => {
					console.log(res)
				})
			},
			maintenanceStatusFun() {
				if (this.dormitoryId) {
					uni.navigateTo({
						url: `/pages/maintenance/maintenanceDetail?dormitoryId=${this.dormitoryId}&dormitoryNo=${this.dormitoryNo}&buildingNo=${this.buildingNo}&type=${this.type}&classDeptId=${this.classDeptId}`,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else {
					uni.navigateTo({
						url: `/pages/maintenance/maintenanceDetail?classId=${this.classId}&className=${this.className}&buildingNo=${this.buildingNo}&type=${this.type}&classDeptId=${this.$route.query.classDeptId}`,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			bottomFun() {
				if (this.classDeptId) {
					this.attBottoms[0].path =
						`/pages/classManagement/classManagementAttendance?classDeptId=${this.classDeptId}`
					this.attBottoms[1].path = `/pages/classManagement/classManageHealth?classDeptId=${this.classDeptId}`
					this.attBottoms[2].path = `/pages/classManagement/classManageMaintence?classDeptId=${this.classDeptId}`

				} else {
					this.attBottoms[0].path =
						`/pages/classManagement/classManagementDormitoryAttendance?buildingNo=${this.buildingNo}&type=${this.type}`
					this.attBottoms[1].path =
						`/pages/classManagement/classManageDormitoryHealth?buildingNo=${this.buildingNo}&type=${this.type}`
					this.attBottoms[2].path =
						`/pages/maintenance/dormitoryMaintenanceList?buildingNo=${this.buildingNo}&type=${this.type}`
				}
			},
			getAppHisRepListByBId() {
				this.$api.maintenance.getAppHisRepListByBId(this.dormitoryId).then(res => {
					this.repArr = res.data
					if (this.repArr.length > 0) {
						this.userName = this.repArr[0].buildingNo
					}
					if (this.repArr.length == 0) {
						this.isRep = true
					} else {

						this.repArr.forEach((item, index) => {
							item.isShow = false
						})
					}
				})
			},
			getAppClassRepairList() {
				this.$api.teacher.getAppClassRepairList(this.classId).then(res => {
					this.repArr = res.data
					if (this.repArr.length > 0 && this.roleName != '班主任') {
						this.userName = this.repArr[0].buildingNo
					}
					if (this.repArr.length == 0) {
						this.isRep = true
					} else {

						this.repArr.forEach((item, index) => {
							item.isShow = false
						})
					}
				})
			},
			skip() {

				// uni.navigateTo({
				// 	url:`/pages/maintenance/maintenanceDetail?classId=${this.classId}&className=${this.className}&buildingNo=${this.buildingNo}&type=${this.type}&classDeptId=${this.classDeptId}`
				// })
			},
			checkDetail(item, index) {
				this.$forceUpdate()
				item.isShow = !item.isShow
			}
		}
	}
</script>

<style>
	.timePos {
		position: relative;
		top: 0rpx;
		right: -30rpx;
		background: white;
		border: 1px solid #cccc;
		border-radius: 20rpx;
		padding: 20rpx;
		width: 620rpx;
		margin-bottom: 20rpx;
	}

	.repDeviceList {
		font-size: 38rpx;
		color: #808080;
		display: flex;
		justify-content: space-between;
		align-content: space-between;
		padding: 20rpx 50rpx;
		/* padding-right: 90rpx; */
	}

	.repDevice {
		text-align: center;
		font-size: 32upx;
		color: #808080;
	}

	.leaveNav {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		font-size: 36upx;
		color: blue;
		width: 100%;
		padding: 50upx
	}

	.leaveBtn {
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		width: 190upx;
		height: 60upx;
		color: white;
		font-size: 26upx;
		font-weight: 0;
	}

	.leaveLine {
		width: 200upx;
		height: 8upx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: 0upx;
		left: -30upx;
	}

	.leaveMgm {
		color: #808080;
		font-size: 28upx;
	}

	.leaveCheck {
		margin-left: 60upx;
		margin-bottom: 30upx;

	}

	.indexContent {
		height: unset !important;

	}
</style>